<template>
  <div class="page">
    <div class="handlePart">
      <el-form :inline="true" :model="form">
        <el-form-item label="名称：">
          <el-input size="small" v-model="form.keywords" placeholder="请输入名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button size="small" type="primary" icon="el-icon-plus" @click="add">新增</el-button>
          <el-button size="small" type="danger" icon="el-icon-delete" @click="dels">删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tablePart">
      <el-table :data="list" :height="'calc(100vh - 240px)'" stripe style="width: 100%"
      :tree-props="{children: 'children'}" row-key="id" @selection-change="handleSelectionChange" :expand-row-keys="expandRowKeys">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <!-- <el-table-column label="序号" type="index" align="center" width="55">
        </el-table-column> -->
        <el-table-column prop="name" label="名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="icon" label="图标" align="center">
          <template slot-scope="scope">
            <i :class="scope.row.icon" v-if="scope.row.icon" style="font-size: 16px;"></i>
          </template>
        </el-table-column>
        <el-table-column prop="url" label="地址" align="center"> </el-table-column>
        <el-table-column prop="componentPath" label="组件路径" align="center"> </el-table-column>
        <el-table-column label="类型" align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.menuType == 1">功能模块</el-tag>
            <el-tag type="warning" v-else-if="scope.row.menuType == 2">系统页面</el-tag>
            <el-tag type="primary" v-else-if="scope.row.menuType == 3">页面功能</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="排序号" prop="sort" align="center" width="70">
        </el-table-column>
        <el-table-column label="是否启用" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" @change="statusChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建日期" align="center">
          <template slot-scope="scope">
            {{ scope.row.createTime ? $util.dateFunction(scope.row.createTime) : '' }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="90">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" title="编辑" @click="edit(scope.row)"></el-button>
            <el-button type="text" icon="el-icon-delete" title="删除" @click="del(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <EditDialog ref="editDialogRef" @listInit="listInit" />
  </div>
</template>
<script>
import EditDialog from './editDialog.vue';
export default {
  data() {
    return {
      form: {
        keywords: '',
        orderBy: 'sort'
      },
      date: [],
      list: [],
      expandRowKeys: []
    };
  },
  mounted() {
    this.listInit();
  },
  methods: {
    listInit(expandRowKeys) {
      this.form.orderBy = 'sort'
      this.$api.getMenuManageList(this.form).then((res) => {
        if(res && res.code == 200){
          let data = res.data || []
          this.list = data
          if(expandRowKeys){
            this.expandRowKeys = expandRowKeys
          }
        }
      })
    },
    // 查询
    search(){
      this.listInit()
    },
    // 新增
    add() {
      this.$refs.editDialogRef.showModal('add');
    },
    // 编辑
    edit(row) {
      this.$refs.editDialogRef.showModal('edit', row);
    },
    // 查看
    view(row) {
      this.$refs.editDialogRef.showModal('view', row);
    },
    // 删除
    del(row){
      this.$confirm('数据删除后将无法恢复，确认删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.delMenuManage([row.sysMenuId]).then(res => {
            if(res && res.code == 200){
              this.$notify.success({
            title: '成功',
                message: '删除成功!'
              });
              this.listInit()
            }
          })
        }).catch(() => {});
    },
    // 批量删除
    dels(){
      if(this.selectList.length == 0){
        this.$notify.warning({
          title: '警告',
          message: '请至少选择一条数据！'
        });
        return
      }
      let ids = []
      this.selectList.forEach(l => {
        ids.push(l.sysMenuId)
      })
      this.$confirm('数据删除后将无法恢复，确认删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.delMenuManage(ids).then(res => {
            if(res && res.code == 200){
              this.$notify.success({
            title: '成功',
                message: '删除成功!'
              });
              this.listInit()
            }
          })
        }).catch(() => {});
    },
    // 是否启用
    statusChange(row){
      console.log(row)
      let params = {
        id: row.sysMenuId,
        status: row.status
      }
      this.$api.changeStatusMenuManage(params).then(res => {
        if(res && res.code == 200){
          this.$notify.success({
            title: '成功',
            message: '修改成功!'
          });
          this.listInit()
        }
      })
    },
    // 多选
    handleSelectionChange(val) {
      this.selectList = val;
    },
  },
  components: { EditDialog }
};
</script>
